<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/urlTools.js"></script>
    <script src="js/sessionTools.js"></script>

    <style>
        .container-right {
            position: relative;
        }

        .interact-area {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .interact-area {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        button#likeBtn,
        a#commentLink {
            font-size: 20px;
            margin-right: 20px;
            /* 增加点赞和评论链接之间的距离 */
        }

        .comment-area {
            position: fixed;
            top: 50px;
            right: 10px;
            width: 300px;
            max-height: calc(100vh - 180px);
            padding: 20px;
            background-color: #ffffff;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
            border-radius: 5px;
            overflow-y: auto;
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }

        .comment-header h3 {
            margin: 0;
        }

        .close-btn {
            background-color: transparent;
            border: none;
            font-size: 24px;
            cursor: pointer;
        }

        #commentList {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #commentList li {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">博客主页</a>

        <span id="LoginShow" style="display: flex; margin: 20px">
            <a href="personal_center.html">个人中心</a>
            <a href="blog_add.html">写博客</a>
            <a href="Javascript:exit()" style="margin-right: 20px;">注销</a>
        </span>

        <a id="notLogin" href="login.html" style="margin-right: 10px;">登陆</a>

    </div>

    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/avatar.png" class="avtar" alt="" id="image">
                <h3 id="author2"></h3>
                <a href="http:www.github.com">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span id="countArt"></span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="title"></h3>
                <!-- 博客时间 -->
                <div class="date">
                    作者 :
                    <span id="author"></span> &nbsp;&nbsp;&nbsp;
                    阅读量 :
                    <span id="rcount"></span>&nbsp;&nbsp;&nbsp;
                    发布时间
                    <span id="createtime"></span>&nbsp;&nbsp;&nbsp;
                </div>
                <!-- 博客正文 -->
                <div id="editorDiv"></div>
            </div>

            <!-- <div class="interact-area fixed-bottom-right">

                <button id="likeBtn">点赞数: <span id="likeCount">0</span></button>
                <a href="#" id="commentLink">评论</a>
            </div>

            <div id="comment-area"
                style="position: fixed; top: 0; right: 0; width: 300px; height: 100%; background-color: white; display: none;">

                <button id="close-button" style="position: absolute; top: 0; right: 0;">关闭</button>
            </div> -->


        </div>

    </div>



    <script type="text/javascript">

        // 获取评论区容器和关闭按钮元素
        // var commentArea = document.getElementById("comment-area");
        // var closeButton = document.getElementById("close-button");

        // //鼠标移入右侧区域，显示评论区
        // document.addEventListener("mousemove", function (event) {
        //     if (event.clientX > window.innerWidth - 300) {
        //         commentArea.style.display = "block";
        //     } else {
        //         commentArea.style.display = "none";
        //     }
        // });

        // // 为关闭按钮元素绑定点击事件处理函数
        // closeButton.addEventListener("click", function () {
        //     // 将评论区容器隐藏
        //     commentArea.style.display = "none";
        // });



        //var closeButton = document.getElementById("close-button");

        // 为关闭按钮元素绑定点击事件处理函数
        // closeButton.addEventListener("click", function () {
        //     // 获取评论区容器并移除它
        //     var commentArea = document.getElementById("comment-area");
        //     document.body.removeChild(commentArea);
        // });


        // 获取评论链接元素
        // var commentLink = document.getElementById("commentLink");

        // // 为评论链接元素绑定点击事件处理函数
        // commentLink.addEventListener("click", function () {
        //     // 创建评论区 DOM 元素并添加到页面中
        //     var commentArea = document.createElement("div");
        //     commentArea.id = "comment-area";
        //     commentArea.style.position = "fixed";
        //     commentArea.style.top = "0";
        //     commentArea.style.right = "0";
        //     commentArea.style.width = "300px";
        //     commentArea.style.height = "100%";
        //     commentArea.style.backgroundColor = "white";
        //     document.body.appendChild(commentArea);
        //     // 这里还可以添加评论区内容等逻辑
        // });





        var editormd;
        function initEdit(md) {
            editormd = editormd.markdownToHTML("editorDiv", {
                markdown: md, // Also, you can dynamic set Markdown text
                // htmlDecode : true,  // Enable / disable HTML tag encode.
                // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
            });
        }

        var id = 0;

        // 点击查看全文以后, 
        function getDetailArticle() {
            id = getParamByKey("id");
            if (id == null || id <= 0 || id == undefined) {
                alert("参数异常!");
                return false;
            }
            jQuery.ajax({
                url: "/article/getdetial",
                type: "post",
                data: {
                    "id": id,
                },
                success: function (res) {
                    // 此时 data 里面返回的是文章对象
                    if (res.code == 200 && res.data != null && res.data.id > 0) {
                        // 设置文章到页面
                        jQuery("#title").html(res.data.title);
                        jQuery("#author").html(res.data.username);
                        jQuery("#author2").html(res.data.username);
                        jQuery("#rcount").html(res.data.rcount);
                        jQuery("#createtime").html(res.data.createtime);
                        initEdit(res.data.content); // 将md形式正文放到其中转为 html 形式展示
                    } else {
                        alert("操作错误 : " + res.data);
                    }
                }
            });
        }
        getDetailArticle();

        // 加载页面即增加一次访问量
        function addVisits() {
            jQuery.ajax({
                url: "/article/addvisits",
                type: 'post',
                data: { 'id': id },
                success: function () { } // 无需处理结果
            });
        }
        // 页面加载时调用
        addVisits();

        function countArticle() {

            jQuery.ajax({
                url: "/article/countart",
                type: 'post',
                data: { 'id': id },
                success: function (res) {
                    if (res.code == 200 && res.data >= 0) {
                        jQuery("#countArt").html(res.data);
                    } else {
                        alert("加载异常 : " + res.msg);
                    }
                }
            });
        }
        countArticle();

        function isLogin() {
            jQuery.ajax({
                url: "/user/islogin",
                type: 'post',
                data: {},
                success: function (res) {
                    if (res.code == 200 && res.data == 1) {
                        // 用户已经登陆, 隐藏登陆按钮
                        jQuery("#notLogin").hide();

                    } else {
                        jQuery("#LoginShow").hide();

                    }
                }
            });
        }
        isLogin();

        // 加载头像
        function initImag() {
            // 请求后端获取图片路径
            jQuery.ajax({
                url: '/article/initimage',
                type: 'post',
                data: { 'id': id },
                success: function (res) {
                    if (res.code == 200 && res.data.image_path != null) {
                        // 设置头像为上传后的图片
                        jQuery("#image").attr("src", res.data.image_path);
                    }
                }
            });
        }
        initImag();

    </script>
</body>

</html>